<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link href="../../component/pear/css/pear.css" rel="stylesheet"/>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">关键字</label>
                <div class="layui-input-inline">
                    <input type="text" name="keyWord" placeholder="文件名称" class="layui-input">
                </div>
                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="query">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="pear-btn pear-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>

        <button type="button" class="layui-btn" id="upload1"><i class="layui-icon"></i>上传文件</button>
    </div>

</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="table" lay-filter="table-filter"></table>
    </div>
</div>

</body>

<script type="text/html" id="record-toolbar">
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
        <i class="layui-icon layui-icon-delete"></i>
    </button>
</script>

<script type="text/html" id="table-toolbar">
    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>

</script>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['easyAdmin', 'upload'], function () {
        let easyAdmin = layui.easyAdmin;
        let upload = layui.upload;
        let cols = [
                [{
                    type: 'checkbox'
                }, {
                    title: '文件名称',
                    field: 'fileName',
                    align: 'left',
                    width: 300
                },
                    {
                        title: '文件路径',
                        field: 'filePath',
                        align: 'left'
                    }, {
                    field: 'url',
                    title: '照片缩略图',
                    width: 100,
                    align: 'center',
                    templet: function (d) {
                        //return  "<img src='"+datum.formatUrl(d.url)+"' style='height:50px;'";
                        var url = d.filePath;
                        return '<a href="' + url + '" target="_blank " title="点击查看">' +
                            '<img src="' + url + '" style="height:20px;" />' +
                            '</a>';
                    }
                },
                    {
                        title: '创建人',
                        field: 'nickName',
                        align: 'left', width: 100
                    },


                    {
                        title: '创建时间',
                        field: 'createTime',
                        align: 'left', width: 180
                    },
                    {
                        title: '操作',
                        toolbar: '#record-toolbar',
                        align: 'left', width: 180
                    }
                ]
            ]
        ;


        let module = "file";
        let uri = "/sys/" + module;
        easyAdmin.tableRender({
            url: uri,
            cols: cols
        });

        easyAdmin.TableTool(uri, module);
        easyAdmin.TableToolBar(uri, module);
        easyAdmin.FormQuery();
        // 配置服务端地址
        const adminServerUrl = layui.data('easyAdmin').serverUrl;
        const user = layui.data('user');
        // 用于判断未登录跳转到登录页
        if (JSON.stringify(user) === "{}") {
            console.log("当前浏览器存储中没有用户信息，讲跳转到login.html")
            location.href = "login.html";
        }
        const tokenName = user.token.name;
        const tokenValue = user.token.value;
        //指定允许上传的文件类型
        const headers = {};
        headers[tokenName] = tokenValue;
        upload.render({
            elem: '#upload1'
            , url: adminServerUrl + uri + '/upload' //此处配置你自己的上传接口即可
            , accept: 'images' //图片类型
            , acceptMime: 'image/jpeg, image/png'
            , exts: 'jpg|png|jpeg' // 限制后缀
            , data: {
                id: 1,
                name: 'laker'
            },
            // headers: {token: 'sasasas'}
            headers: headers
            , done: function (result) {
                // layer.msg('上传成功');
                easyAdmin.TableRefresh();
                if (!result.success) {
                    layer.msg(result.msg, {
                        icon: 2,
                        time: 1000,
                        area: ['260px', '65px']
                    });
                }
            }, error: function () {
                //请求异常回调
                layer.msg('上传失败');
            }
        });
    })
</script>
</html>
